<template>
  
  <div class="dashboard-container">
    <el-header>欢迎</el-header>
    <div class="item">
      <h1>{{studentCount}}</h1>
      <el-button :plain="true" @click="open1"><h4>总人数</h4></el-button>
    </div>

    <div class="item">
      <h1>{{classsCount}}</h1>
      <el-button :plain="true" @click="open2"><h4>班级总数</h4></el-button>
    </div>

    <div class="item">
      <h1>{{teacherCount}}</h1>
      <el-button :plain="true" @click="open3"><h4>老师总数</h4></el-button>
    </div>

    <div class="item">
      <h1>{{academyCount}}</h1>
      <el-button :plain="true" @click="open4"><h4>学院总数</h4></el-button>
    </div>
    <div class="item">
      <h1>{{schoolCount}}</h1>
      <el-button :plain="true" @click="open5"><h4>学校总数</h4></el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  methods: {
      open1() {
        this.$message('总人数为4');
      },
      open2() {
        this.$message('班级总数为3');
      },
      open3() {
        this.$message('老师总数为4');
      },
      open4() {
        this.$message('学院总数为4');
      },
      open5() {
        this.$message('学校总数为3');
      },
  },
  data: () => ({
      show3: true
    }),
  data() {
    return{
      students: '',
      studentCount: '',
      classs: '',
      classsCount: '',
      teacher: '',
      teacherCount: '',
      academy: '',
      academyCount: '',
      school: '',
      schoolCount: ''
    }
  },
  mounted() {
    this.$http.post('/api/student/get').then(res => {
      this.students = res
      this.studentCount = this.students.length
      console.log(this.studentCount)
    })

    this.$http.post('/api/classs/get').then(res => {
      this.classs = res
      this.classsCount = this.classs.length
      console.log(this.classsCount)
    })
    this.$http.post('/api/teacher/get').then(res => {
      this.teacher = res
      this.teacherCount = this.teacher.length
      console.log(this.teacherCount)
    })
    this.$http.post('/api/academy/get').then(res => {
      this.academy = res
      this.academyCount = this.academy.length
      console.log(this.academyCount)
    })
    this.$http.post('/api/school/get').then(res => {
      this.school = res
      this.schoolCount = this.school.length
      console.log(this.schoolCount)
    })
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.dashboard-container{
  display: flex;
}

  .item{
    text-align: center;
    transition: all 0.1s;
    position: relative;
    border-radius: 3px;
    top: 0;
    box-shadow: 0 0 0 0 rgba(0,0,0,0.1);
    padding: 50px;
    margin: 30px;
  }
  .item:hover{

    top: -20;
    box-shadow: 1px 10px 15px 2px rgba(0,0,0,0.1);
  }
  .el-header, .el-footer {
    background-color: rgb(107, 172, 224);
    color: #333;
    text-align: center;
    line-height: 60px;
  }
</style>
